import React from 'react';
import { Button } from 'antd';
import './index.css';

type PageButtonProps = {
  total: number;
  navigatePrev: any;
  navigateNext: any;
  navigatePage: any;
}

type PageButtonState = {
  currPage: number;
}


export function Pages(props: { total: number, curr: number }) {
  const pagesIcon: Array<JSX.Element> = [];
  let totalPage = props.total / 5;
  for (let index = 0; index < totalPage; index++) {
    if (index === props.curr - 1) {
      pagesIcon.push(
        <div className="page-active page">
          {index + 1}
        </div>
      )
    } else {
      pagesIcon.push(
        <div className="page">
          {index + 1}
        </div>
      );
    }
  }
  return <div className="pages-button">
    {pagesIcon}
  </div>
}


export default class PageButton extends React.Component<PageButtonProps, PageButtonState> {
  state = {
    currPage: 1,
    pages: []
  }

  componentDidMount() {

  }

  navigatePrev = () => {
    this.props.navigatePrev();
  }


  navigateNext = () => {
    this.props.navigateNext();
  }


  navigatePage = (number: number) => {
    this.props.navigatePage(number);
  }

  render() {
    return <div className="page-button-container">
      <div className="prev-button">
        <Button type="primary" shape="round" size="middle">上一页</Button>
      </div>

      <Pages total={100} curr={1} />

      <div className="next-button">
        <Button type="primary" shape="round" size="middle">下一页</Button>
      </div>
    </div>;
  }
}